<template>
	<view>
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="loadMore">
			<view class="selectbox">
				<view>
					<view class="">地区：</view>
					<block v-for="(item, index) in areaList" :key="'area' + index">
						<view :class="areaindex == index ? 'active' : ''" @click="changearea(index)">{{ item }}</view>
					</block>
				</view>
				<view>
					<view class="">排序：</view>
					<block v-for="(item, index) in orderList" :key="'order' + index">
						<view :class="orderindex == index ? 'active' : ''" @click="changeorder(index)">{{ item }}</view>
					</block>
				</view>
				<view>
					<view class="">类型：</view>
					<block v-for="(item, index) in typeList" :key="'type' + index">
						<view :class="typeindex == index ? 'active' : ''" @click="changetype(index)">{{ item }}</view>
					</block>
				</view>
			</view>
			<view class="mvbox">
				<view class="mvitem" v-for="(item, index) in mvList" :key="index">
					<view class="mvimg" @click="gotoMv(item.id)">
						<image class="" :src="item.cover" mode="widthFix" lazy-load="true" />
					</view>
					<view class="mvname">{{ item.name }}</view>
					<view class="mvcount">播放量：{{ item.playCount }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mvSquare } from '../../api/mvsquare.js';
export default {
	data() {
		return {
			areaindex: 0,
			orderindex: 0,
			typeindex: 0,
			areaList: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
			orderList: ['上升最快', '最热', '最新'],
			typeList: ['全部', '官方版', '原生', '现场版', '网易出品'],
			page:1,
			mvList:[]
		};
	},
	onLoad(){
		this.getAll()
	},
	methods: {
		async getAll(){
			let result = await mvSquare({
				url:"/mv/all",
				data:{
					area:this.areaList[this.areaindex],
					order:this.orderList[this.orderindex],
					type:this.typeList[this.typeindex],
					limit:30,
					offset:(this.page-1)*30
				}
			})
			this.mvList.push(...result[1].data.data)
		},
		changearea(index) {
			this.areaindex = index;
			this.page=1;
			this.mvList=[]
			this.getAll()
		},
		changetype(index) {
			this.typeindex = index;
			this.page=1;
			this.mvList=[]
			this.getAll()
		},
		changeorder(index) {
			this.orderindex = index;
			this.page=1;
			this.mvList=[]
			this.getAll()
		},
		loadMore() {
			this.page = this.page + 1;
			this.getAll()
		},
		gotoMv(id){
			uni.navigateTo({
				url: '/pages/mv/mv?id='+id+"&type="+5
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.selectbox > view {
	margin: 20upx 10upx;
	display: flex;
	font-size: 28upx;
	view {
		margin: 0upx 30upx 0 0;
	}
}
.active {
	color: $uni-bg-color;
}
.scroll {
	width: 100%;
	height: 100vh;
}
.mvbox {
	display: flex;
	flex-wrap: wrap;
}

.mvbox .mvitem {
	width: 50%;
	margin-bottom: 20upx;
}

.mvbox .mvitem  .mvimg {
	width: 96%;
	overflow: hidden;
	position: relative;
	margin: 0 2%;
}

.mvbox .mvitem  .mvimg image {
	width: 100%;
	height: auto;
}

.mvbox .mvitem  .mvimg .bgimgbox {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mvbox .mvitem  .mvimg .bgimgbox image {
	width: 100upx;
	height: auto;
}

.mvbox .mvitem .mvname {
	height: 40upx;
	line-height: 40upx;
	margin: 0upx 20upx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	font-size: 26upx;
}

.mvbox .mvitem .mvcount {
	margin: 10upx 20upx;
	font-size: 25upx;
	color: #ccc;
}
</style>
